<template>
	<view class="activity_cards">
		<view class="activity_cards_img" @click.stop="handleDetails">
			<image :src="item?.cover"></image>
			<view class="cactivity_cards_img_item" v-if="item?.activityStatus === '1'">
				{{item?.activityStatusName}}
				<!-- <view class="time">
					<text class="time__item">{{ timeData.days }}&nbsp;</text><text>天</text>
					<text
						class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;</text><text>时</text>
					<text class="time__item">{{ timeData.minutes }}&nbsp;</text><text>分</text>
				</view> -->
			</view>
			<template v-if="status">
				<image src="http://qianxueapplet.suoeryun.com/notStarted.png"
					class="cactivity_cards_img_status" v-if="item?.activityStatus === '1'"></image>
				<image class="cactivity_cards_img_status"
					src="http://qianxueapplet.suoeryun.com/inProgress.png"
					v-else-if="item?.activityStatus === '2'"></image>
				<image class="cactivity_cards_img_status"
					src="http://qianxueapplet.suoeryun.com/ended.png"
					v-else-if="item?.activityStatus === '3'"></image>
			</template>
		</view>
		<view class="activity_cards_bottom">
			<view @click.stop="handleDetails">
				<view class="activity_cards_title">{{item?.activityName}}</view>
				<view class="activity_cards_subtitle">
					<image src="http://qianxueapplet.suoeryun.com/age-appropriate.png">
					</image>
					<template v-if="item?.fitAgeMin === '不限' && item?.fitAgeMax === '不限'">{{item?.fitAgeMax}}</template>
					<template
						v-else>{{item?.fitAgeMin === '不限'?item?.fitAgeMin :`${item?.fitAgeMin}岁`}}-{{item?.fitAgeMax === '不限'?item?.fitAgeMax :`${item?.fitAgeMax}岁`}}</template>
				</view>
				<view class="activity_cards_tag" v-if="item?.lable">
					<text v-for="tag in item?.lable?.split(',')" :key="tag">#{{tag}}</text>
				</view>

			</view>
			<view class="activity_cards_btm">
				<text class="activity_cards_btm_left">{{item?.browse}}次浏览</text>
				<view class="activity_cards_btm_right">
					<view class="activity_cards_btm_right_item" @click.stop="handleLike">
						<image src="http://qianxueapplet.suoeryun.com/like.png"
							v-if="item?.izLike === '0'"></image>
						<image src="http://qianxueapplet.suoeryun.com/likeSelect.png"
							v-else></image>
						<text :style="{color:item?.izLike === '0'?'#666666':'#FF943C'}">{{item?.likes}}</text>
					</view>
					<view class="activity_cards_btm_right_item" @click.stop="handleComment">
						<image src="http://qianxueapplet.suoeryun.com/comments.png"></image>
						<text>{{item?.comment}}</text>
					</view>
					<!--  open-type="share" -->
					<button class="activity_cards_btm_right_item" @click.stop="handleShare">
						<image src="http://qianxueapplet.suoeryun.com/forward.png"></image>
						<text>{{item?.relay}}</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { addLikes, updateActivityNum, queryIsMedia } from '@/config/index.api';

	const emit = defineEmits(['handleEmit']);

	const { item, status } = defineProps({
		item: {
			type: Object,
			default: () => ({}),
		},
		status: {
			type: Boolean,
			default: () => (false)
		}
	});

	/**
	 * 分享
	 */
	// onShareAppMessage(async (res) => {
	// 	console.log(res, '123');
	// 	const record = await updateActivityNum({ activityId: item?.id, operationType: '2' });
	// 	emit('handleEmit', record, 'relay');
	// 	return {
	// 		title: item?.activityName,
	// 		path: `/pages/index/acitvityDetails?id=${item?.id}`
	// 	}
	// })

	/**
	 * 点赞
	 */
	async function handleLike() {
		uni.$u.throttle(async () => {
			const res = await addLikes({ activityId: item?.id, operationType: '1' });
			uni.showToast({
				icon: 'none',
				title: res?.izLike === '1' ? '点赞成功' : '取消点赞'
			});
			emit('handleEmit', res, 'likes');
		}, 1000, true);
	}

	/**
	 * 评论
	 */
	function handleComment() {
		emit('handleEmit', item, 'comment');
	}

	/**
	 * 分享
	 */
	function handleShare() {
		emit('handleEmit', item, 'relay');
	}

	/**
	 * 查看详情
	 */
	async function handleDetails() {
		const data = await queryIsMedia({ id: item?.id });
		// 添加浏览量
		const res = await updateActivityNum({ activityId: item?.id, operationType: '3' });
		emit('handleEmit', res, 'browse');
		if (data == '1') {
			uni.$u.route('/pages/index/acitvityImgVideoDetails', {
				id: item?.id
			});
		} else {
			uni.$u.route('/pages/index/acitvityDetails', {
				id: item?.id
			});
		}
	}
</script>

<style scoped lang="scss">
	.activity_cards {
		margin: 32rpx 24rpx 0 24rpx;
		border: 24rpx;
		background-color: #ffffff;
		border-radius: 24rpx;

		.activity_cards_img {
			position: relative;

			&>image {
				width: 100%;
				height: 380rpx;
				border-radius: 24rpx 24rpx 0 0;
			}

			.cactivity_cards_img_item {
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 5px;
				height: 56rpx;
				background-color: #00000066;
				width: 95%;
				padding: 6rpx 20rpx;
				color: #ffffff;
				font-size: 30rpx;

				.time__item {
					width: 48rpx;
					height: 48rpx;
					background-color: #FF943C;
					padding: 8rpx;
					margin: 0 10rpx;
				}
			}

			.cactivity_cards_img_status {
				position: absolute;
				right: 0;
				width: 170rpx;
				height: 170rpx;
				border-radius: 0;
			}
		}

		.activity_cards_bottom {
			padding: 20rpx;

			.activity_cards_title {
				margin-bottom: 12rpx;
				font-size: 36rpx;
				font-weight: 600;
			}

			.activity_cards_subtitle {
				font-size: 28rpx;
				font-weight: 600;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
					vertical-align: text-bottom;
				}
			}

			.activity_cards_tag {
				margin: 12rpx 0 0 0;

				text {
					border-radius: 192rpx;
					background: #FCF2EE;
					padding: 6rpx 18rpx;
					display: inline-block;
					font-size: 26rpx;
					font-weight: 550;
					color: #BC6C60;
					margin-right: 20rpx;
					margin-bottom: 12rpx;
					// margin-top: 14rpx;
				}
			}

			.activity_cards_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.activity_cards_btm_left {
					color: #9E9E9E;
					font-size: 24rpx;
				}

				.activity_cards_btm_right {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.activity_cards_btm_right_item {
						display: flex;
						align-items: center;

						&::after {
							border: 0;
						}

						background-color: transparent;
						margin-left: 38rpx;
						padding:0;
						height: 42rpx;
						line-height: 42rpx;

						&:first-child {
							margin-left: 0;
						}

						image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 10rpx;
							vertical-align: middle;
						}

						text {
							color: #666666;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>